---
title: 'The 2021 Retrospective'
publishedAt: '2021-12-31'
description: 'My retrospective of the year of 2021. Achievements, recognitions, and lessons learned.'
englishOnly: 'true'
banner: 'markus-winkler-EcgyryGygeE-unsplash_vuovbv'
tags: 'retro'
---

## Introduction

2021 has been a great year for me, I learned a bunch of things at the rate of a year. I want to make this blog to remind me of what I did and how much I grow each year.

## Learning More React Framework

A month before 2021, I decided to come out of my comfort zone which is Create React App, and try another framework such as Gatsby and Next.js. I still remember how I research which framework to learn and the dilemma to invest my time for one framework.

<CloudinaryImg
  mdx
  publicId='theodorusclarence/blogs/2021-retrospective/framework-repo_wgfidc'
  alt='framework-repo'
  width={418}
  height={195}
/>

I ended up learning them both 😄, but I decided that I like next.js more. Gatsby image optimization is great, but there is a steep learning curve which is graphql.

### Learning TypeScript

I also learn to use TypeScript! It is a great deal for me and I don't think I will go back to JavaScript. I think I'm much more productive when working using TypeScript.

### Building Starter

After the decision to learn Next.js, I started learning it more deeply and got tired of setting up all of the configurations on each repo initialization. So I build a [starter repository](https://github.com/theodorusclarence/ts-nextjs-tailwind-starter), incrementally add a bunch of development features that increase efficiency, and it grew some recognition that people that are using it loved it.

<CloudinaryImg
  mdx
  publicId='theodorusclarence/blogs/2021-retrospective/starter-repo_pwmuxy'
  alt='starter-repo'
  width={452}
  height={149}
/>

## Projects

### First Landing Page Gigs

This year, I also got my first organizational project. It was one of the largest events at my university, and I'm really proud that I am in charge to create a website and also being a Vice Coordinator of my Division. To be honest, I was not expecting to get paid, but I got paid $25 for the job. Thanks to my coordinator, she haggled to get us paid 🤣.

<LiteYouTubeEmbed
  id='1our4lSBFGc'
  poster='maxresdefault'
  title='Petrolida Project'
  noCookie={true}
/>

It was not bad, I designed it with my coordinator and one of my website team. It was made using Next.js, and my first time using Tailwind CSS, I enjoyed it both.

Oh, it is my first time playing with animation on a website. I learn to use GSAP with some intersection observers to make it animate on scroll. The code was kinda shabby, I use the JavaScript approach by selecting the class and animating it inside `useEffect`.

Honestly, during the first time I use React, I kinda use the library the wrong way. I didn't really use the react-gsap and just go for the JavaScript version of it. But eventually, I learn the right way and created a [GSAP demo page](https://learn-react-gsap.vercel.app/).

### More Complex Stuff

<CloudinaryImg
  mdx
  publicId='theodorusclarence/blogs/2021-retrospective/more-complex-projects_u2jx2n'
  alt='more-complex-projects'
  width={1114}
  height={759}
/>

I build some more complex projects after that. Some of it was paid, some were made as a submission for hackathons. Through this project, my process of learning is paid off. I implement my knowledge, even seek more from the errors I got.

## Exploring Advanced Libraries

I started to look into useful React libraries that most developers use, I always create a repository of me trying something. Usually, it was just a code-along from YouTube tutorials. These libraries improve my code and overall practice. It is super useful and I'm at least practicing the library choosing as for the JavaScript environment, there are a **bunch** of libraries to pick from. Knowing what are the strengths and weaknesses of them is a great asset.

<CloudinaryImg
  mdx
  publicId='theodorusclarence/blogs/2021-retrospective/exploring-advance-lib_rn72hl'
  alt='exploring-advance-lib'
  width={387}
  height={327}
/>

### Learning from docs only

I'm glad that I took my time to check what libraries there are, and I'm grateful to learn to use libraries. At first, I can't even read lib documentation and it is mandatory to watch some tutorial videos first. As time passes, I am now more comfortable with using new libraries just by looking at their docs and some project examples. This is a huge deal for me and saves my time when learning stuff.

## Internships

I interned at 3 companies this year 😮. I'm so proud that I can work as an intern at an early stage (4th semester), while most of my friends still figuring things out. It is a head start for me and brings me more value and experience.

### Tutee.id

I work at this company from November 2020 to March 2021. I was still learning by then and I'm mostly confused about what to do and how to do the things I was tasked with. The work is kind of slow because it is volunteer work, none of us got paid 🥲. But this is my first work in a group and I'm learning how to collaborate using Git. I can't even exit vim before this internship.

<CloudinaryImg
  mdx
  publicId='theodorusclarence/blogs/2021-retrospective/tutee-full_pppdxn'
  alt='tutee-full'
  width={1440}
  height={792}
/>

I mostly work for the CSS part of the website, because that's what I'm good at the time. I was really scared to take complex React things at the time. On this website, I managed to make everything responsive including the Navbar which is really challenging at the time.

<CloudinaryImg
  mdx
  publicId='theodorusclarence/blogs/2021-retrospective/tutee-team_wge11d'
  alt='tutee-team'
  width={1439}
  height={876}
/>

I enjoyed a lot working with this team, they are chill and supportive of each other. I was the youngest of them all, and got some pointers that I'm really good with what I'm doing and can be a great prospect. It's really flattering for me that just learned how to code frontend development.

### AntiGrvty

This is the second internship from March to May. AntiGrvty is a software agency that creates sites for notable companies in Indonesia such as Bank Mandiri, Sampoerna, Dji Sam Soe, etc. This is my first full-time internship, and I'm doing it while taking 23 credits in my uni. I have doubt when I got the offer that I can't make it by doing work and still taking classes. Turns out they are really flexible with time. I was able to work at night and finish my assignment in time.

I work mostly in HTML & SCSS for Bank Mandiri and Sampoerna. It was not that hard, more like exhausting work. There is a lot of pages to work with. But I learn to translate design to code as close as possible. I was paid in this internship so I'm quite okay with the exhausting part.

Sadly in this internship, I didn't get the chance to know someone as a team. I mostly work only with the designers and we don't have much group activity. Probably because they are an agency and didn't really have a people bonding type of event.

### SIRCLO

This internship is from July to October. This is also full-time and paid. Hands down, this is the best internship I have ever partaken in. I was in a squad called 'Alpha' and we work with an npm library to be used by several sites. It is a mind-opening experience, I met many great developers here and often talk and consult with them. It is great to have a mentor and to discuss some issues. Shout out to Kak Oliv and Kak Bill.

I learn many things here but mostly suffer from the slowness of my machine. It was sad that they don't lend any laptops to interns. I could really use a more powerful machine. This internship is also full-time and I need to standby from 9-5. I was still confused about how full-time work works. Like, should I code for 8 hours? I haven't really got an answer for this, maybe in the future.

<CloudinaryImg
  mdx
  publicId='theodorusclarence/blogs/2021-retrospective/sirclo-team_iw66fa'
  alt='sirclo-team'
  width={1280}
  height={847}
/>

A solid team. This is also my first time working with a team that has Quality Assurance. It is nice having someone to check on our feature/bug fix and they can test if it is working correctly, and give feedback if there is something wrong with it.

I think I did a great job in this internship according to the feedback I got from my colleague.

## theodorusclarence.com

I started developing my website in January. It was written using JavaScript and take some inspiration from [leerob.io](http://leerob.io). There are a lot of features on my v0 blog which are:

1. Blog
2. Library
3. Projects Page
4. Like buttons
5. Views counter

The features of course added incrementally during the year.

This website is like my work of art and a forever work in progress. Creating a personal website means that I can add anything that I like, I can use the new library that just came out, I can experiment with designs, I can implement some features that I found on other developers' blogs to mine.

If you haven't built a personal site with multiple pages like this, you really should. You will spend a lot of hours building one and improving over time.

### TypeScript Rewrite

I rewrote my website to TypeScript and reconsider all of my practice throughout the year. This refactor process is proof that my skills grew. I saw a lot of patterns that are questionable and immediately rewrote them to something sturdy and logical.

<CloudinaryImg
  mdx
  publicId='theodorusclarence/blogs/2021-retrospective/ts-rewrite_zrxbya'
  alt='ts-rewrite'
  width={918}
  height={180}
/>

### Design Opinions

I undergo a lot of design changes, and this improves my design skills. I often ask for reviews from developers such as Gary Simon, Kevin Powell, Josh W Comeau, etc. to get some feedback and improve my design.

<CloudinaryImg
  mdx
  publicId='theodorusclarence/blogs/2021-retrospective/design-opinions_wujiv1'
  alt='design-opinions'
  width={2884}
  height={868}
/>

## Hackathons

I attended 2 hackathons this year, and won twice!

- [uOttaHack Canada](https://theodorusclarence.com/projects/love4heroes) - Deloitte Challenge
- [GarudaHack 2.0](https://theodorusclarence.com/projects/seasforus) - Runner up

Check out the [project page](https://theodorusclarence.com/projects) to see what I built and what I learned from the hackathon, or click the link I put on the list.

### Swags

I got some swags!

<SplitImage>
  <Split>
    <CloudinaryImg
      mdx
      className='!mb-0'
      publicId='theodorusclarence/blogs/2021-retrospective/uotta-swag_tlzjwu'
      alt='uotta-swag'
      width={1439}
      height={999}
    />
  </Split>
  <Split>
    <CloudinaryImg
      mdx
      className='!mb-0'
      publicId='theodorusclarence/blogs/2021-retrospective/garuda-swag_iuzrvq'
      alt='garuda-swag'
      width={4032}
      height={3024}
    />
  </Split>
</SplitImage>

## Blog

I also started writing this year, and no doubt it has been a journey. A lot of people like my way of writing and I helped some people to understand a topic that they didn't really understand before. I'm really grateful that I grew some audience for my writings.

### Recognition

I also got some recognition that motivates me to keep going and writing more and more.

<SplitImage>
  <Split>
    <CloudinaryImg
      mdx
      className='!mb-0'
      publicId='theodorusclarence/blogs/2021-retrospective/badges_pykubx'
      alt='badges'
      width={388}
      height={545}
    />
    <CloudinaryImg
      mdx
      publicId='theodorusclarence/blogs/2021-retrospective/react-newsletter_apikcg'
      alt='react-newsletter'
      width={1436}
      height={849}
    />
  </Split>
  <Split>
    <CloudinaryImg
      mdx
      className='!mb-0'
      publicId='theodorusclarence/blogs/2021-retrospective/top-author-dev_n0nj9m'
      alt='top-author-dev'
      width={590}
      height={698}
    />
    <CloudinaryImg
      mdx
      publicId='theodorusclarence/blogs/2021-retrospective/top-nextjs_vnhiep'
      alt='top-nextjs'
      width={753}
      height={644}
    />
  </Split>
</SplitImage>

<CloudinaryImg
  mdx
  publicId='theodorusclarence/blogs/2021-retrospective/blog-analytics_ao4sme'
  alt='blog-analytics'
  width={1126}
  height={633}
/>

## Talks

I hosted my first webinar!

<CloudinaryImg
  mdx
  publicId='theodorusclarence/blogs/2021-retrospective/flexbox-webinar_gtbrf0'
  alt='flexbox-webinar'
  width={1785}
  height={2526}
/>

It was attended by over 80 people, and the feedback that came back is really positive.

## Gear Upgrade 🤑

From my internships, I got some money that I can spend on some gear. This is something that I'm super excited about. Of course, I invest most of my salary, but I still make some exceptions to buy something that can improve my overall productivity

### Monitor

I got a 27-inch monitor to help me code faster with more windows that I can open, and it did.

<CloudinaryImg
  mdx
  publicId='theodorusclarence/blogs/2021-retrospective/monitor_zkbwfm'
  alt='monitor'
  width={3024}
  height={1905}
/>

### Keychron K2

This is a great deal, it's very comfortable to type on a mechanical keyboard, I also bought some extra keycaps because the stock keycaps are oily with extended use.

<SplitImage>
  <Split>
    <CloudinaryImg
      mdx
      publicId='theodorusclarence/blogs/2021-retrospective/keychron-ori_gfm2sw'
      alt='keychron-ori'
      width={4032}
      height={3024}
    />
  </Split>
  <Split>
    <CloudinaryImg
      mdx
      className='!mb-0'
      publicId='theodorusclarence/blogs/2021-retrospective/keychron-new-caps_xfnkz5'
      alt='keychron-new-caps'
      width={4032}
      height={3024}
    />
  </Split>
</SplitImage>

### Kindle

I bought a kindle to start a reading habit and it works. I read almost every day, except when its finals week and I have no time to do that.

<CloudinaryImg
  mdx
  publicId='theodorusclarence/blogs/2021-retrospective/kindle_etwzt5'
  alt='kindle'
  width={3024}
  height={4032}
/>

### Proper Ergonomic Chair

Even though it costs me $250, it saved my back. THE CUSHION IS SO SOFT. Just buy it, treat yourself to a nice chair.

<CloudinaryImg
  mdx
  publicId='theodorusclarence/blogs/2021-retrospective/ergo-chair_jrowp2'
  alt='ergo-chair'
  width={1171}
  height={721}
/>

## What's next for 2022

I'll be attending Apple Developer Academy next year. It is a 10-month academy to learn iOS Development, and also UI/UX & Project Management. It is only open for about 100 people with some strict selection, and I'm glad that I made the cut.

I hope next year I can improve my coding skills and learn more about the industry. I'm excited to see what I can do with my new skills.
